<!-- <template>
	<view class="w100 min100 sign pb-40">
		<view style="padding:120rpx 0 40rpx; width: 100%;height: 340rpx;background: url(@/static/bg.png) no-repeat center center;background-size: contain;">
			<view class="gray-2 text-center">已连续签到</view>
			<view class="text-center mt-30 "><text style="font-size: 50rpx;margin-right: 10rpx;" class="yellow bold">{{sumCount}}</text>
				天</view>
		</view>
		<view class="bg-white mlr-20 radius-10 ptb-20">
			<model-calendar :sendYear="toYear" :sendMonth="toMonth" :dataSource="signData" :totalNum="sumCount" @dateChange="getRecord">
			</model-calendar>
			<view class="plr-40">
				<u-button type="warning" @click="clickSign" :disabled="status" class="w100">{{!status?'立即签到':'今日已签到'}}</u-button>
			</view>
		</view>
		<view class='count'>
			<view class="bold">连续签到有机会领取以下奖励：</view>
			<view class="mt-20 mb-6">连续 <text class="yellow">7</text>天，奖励积分<text class="yellow">{{set.signin_day_seven}}</text>分；</view>
			<view>连续<text class="yellow">15</text>天，奖励积分<text class="yellow">{{set.signin_day_fifteen}}</text>
				分</view>
		</view>
	</view>
</template>

<script>
	import modelCalendar from '@/components/Calendar.vue';

	export default {
		data() {
			return {
				toYear: parseInt(new Date().getFullYear()), //本日
				toMonth: parseInt(new Date().getMonth() + 1), //本月
				sumCount: 0,
				signData: [], //["2021-01-13", "2021-01-12", "2021-01-11"]
				status: false,
				set: {},
				month: ''
			};
		},
		components: {
			modelCalendar
		},
		onLoad() {
			this.init()
			this.setSign()
		},
		methods: {
			init() {
				this.$http('/addons/ddshop/signin/signin_record', {
					month: this.month
				}).then(data => {
					this.signData = data.signin_record
					this.sumCount = data.succession_signin
					this.status = data.is_signin_day
				})
			},
			setSign() {
				this.$http('/addons/ddshop/signin/signin_set').then(data => {
					this.set = data.signin_set
				})
			},
			getRecord(data) {
				this.month = data
				this.init()
			},
			clickSign() {
				this.$http("/addons/ddshop/signin/signin").then(res => { //可以通过后台接口添加当前用户当日打卡记录，
					uni.showToast({
						title: "签到成功",
						icon: 'success',
						duration: 2000
					});
					this.init()
				})
			},
			//当模板的时候可以直接引入，然后触发子组件事件到父界面去控制数据

			//获取当前用户该任务的签到数组
			getData(val) {
				let y = val.split('-')[0];
				let m = val.split('-')[1];
				//this.$http.postHttp("Comment/GetRecord", {//可以通过后台接口去获取你的打卡数据
				// 	Year: y,
				// 	Month: m,
				// }, (res) => {
				//console.log(res);
				this.sumCount = 88; //res.SumCount

				if (y == this.toYear && m == this.toMonth) {
					//这是我造的假数据！！！
					let num = ["2", "3", "6", "8", "12", "15"],
						newSign = [],
						today = new Date().getDate();
					for (let i = 0; i < 6; i++) {
						if (parseInt(num[i]) > today) {
							break;
						}
						newSign.push(y + "-" + m + "-" + num[i])
					}

					//console.log(newSign);//最后传给组件的格式看这里-------------
					this.signData = newSign;
					console.log(this.signData);
				} else {
					this.signData = [];
				}
				// })
			},
		}
	}
</script>

<style lang='scss'>
	.sign {
		background: url("@/static/bg.png") no-repeat top left;
		background-size: cover;
	}

	.count .daynumber {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.count .daynumber .day {
		margin-top: 50rpx;
	}

	.count {
		margin: 20rpx;
		padding: 30rpx;
		display: flex;
		/* text-align: center; */
		border-radius: 10px;
		flex-direction: column;
		/* justify-content: center; */
		background-color: #fff;
		/* align-items: center; */
	}

	.count .number {
		color: #fff;
		font-size: 60rpx;
		background-color: #94db98;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 20rpx;
	}

	.monthSum {
		color: red;
		font-size: 40rpx;
	}

	.count text {
		margin: 10rpx;
	}
</style>

 -->
 <template>
	 <view class="">
	 	<view class="status_bar">
	 		 </view>
	 		 <view class="yujing-word1">
	 		 <image src="../../../static/yujing/back.png" mode="" @click="to_shouye"></image>
	 		 	<view class="word1-word">
	 		 		每日打卡
	 		 	</view>
	 		 </view>
	 	<view class="calendar">
	 	  <ss-calendar
	 	    :checks="checks"
	 	    @current-month-day="onSignIn"
	 	    @prev-month-day="onPrev"
	 	    @next-month-day="onNext"
	 	  />
	 	 	
	 	</view>
	 </view>
 </template>
 
 <script>
 import ssCalendar from '@/components/ss-calendar/ss-calendar.vue'
 export default {
   data() {
     return {
       checks: [],
	   sum:0
     }
   },
   components: {
     ssCalendar
   },
   methods: {
	  to_shouye(){
	  	uni.switchTab({
	  		url:"../shouye"
	  	})
	  },
     onSignIn(payload) {
       const { checked, year, month, day } = payload
		var sum=0;
		sum++;
       !checked && this.checks.push(`${year}-${month}-${day}`)
 	  
       console.log('onSignIn', payload)
 	  uni.showModal({
 	  	title:"恭喜您今日打卡成功",
		content:"您已经连续打卡"+sum+"天"
 	  })
     },
     onPrev(payload) {
       console.log('onPrev', payload)
     },
     onNext(payload) {
       console.log('onNext', payload)
     }
   }
 }
 </script>
 <style>
    page {
    	background-image: url(@/static/yujing/yujingbg.png);
    	background-repeat: no-repeat;
    	background-attachment: fixed;
    	background-size: 100% 100%;
    }
    *{
    	padding: 0%;
    	margin: 0%;
    }
    image{
    	display: flex;
    }
    .yujing-word1{
    	width: 90%;
    	height: 100rpx;
    	margin: auto;
    	margin-top: 40rpx;
    	position: relative;
    	
    }
    .word1-word{
    	color: white;
    	font-size: 40rpx;
    	text-align: center;
    	letter-spacing: 15rpx;
    	
    }
    .yujing-word1 image{
    	width: 50rpx;
    	height: 50rpx;
    	margin-top: 10rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    }
 </style>